/**
 * 企业点位
 */
import React, { useEffect, useState } from 'react'
import { Style, Icon } from 'ol/style'
import { message } from 'antd'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { transform } from 'ol/proj'
import { wgs84togcj02 } from '@ysrd/ol5-react-ts/utils'
import { Layer } from '@ysrd/ol5-react-ts'
import dayjs from 'dayjs'
import axios from 'axios'
import icons from '&/images/sites/index'

export default (props) => {
  const { layers, setLayers } = props
  const [list, setList] = useState([])

  useEffect(() => {
    getData()
  }, [])

  useEffect(() => {
    if (props.visible) {
      getData()
    }
    if (!props.visible || list.length < 0) return
    const features = []
    list.map((item) => {
      features.push(
        new Feature({
          geometry: new Point(
            transform(
              wgs84togcj02(Number(item.wgs84_lng), Number(item.wgs84_lat)),
              'EPSG:4326',
              'EPSG:3857'
            )
          ),
          obj: item
        })
      )
    })
    setLayers(
      layers.map((item) => {
        if (item.layerId === props.layerId) {
          item.source = new VectorSource({
            features: features
          })
          item.style = setStyle()
        }
        return item
      })
    )
  }, [props.visible])

  const getIndex = (value) => {
    let idx = 0
    if (value > 0) {
      var pol = [35, 75, 115, 150, 250]
      if (value < Math.min.apply(null, pol)) {
        idx = 1
      }
      if (value > Math.max.apply(null, pol)) {
        idx = pol.length + 1
      }
      for (var i = 0; i < pol.length; i++) {
        if (pol[i] >= value) {
          idx = i + 1
          break
        }
      }
    }
    return idx
  }

  const setStyle = () => {
    return (f) => {
      let o = f.get('obj')
      let v = o.data[0].values[0].pollutant_value
      let idx = getIndex(v)
      return new Style({
        image: new Icon({
          src: icons[`icon_${idx}`],
          scale: 0.6
        })
      })
    }
  }

  const getData = () => {
    let json = {
      token:
        'tAFuWeewk-ojwVPoNP9PCVplZuSNZBGu3knrvP5LiKkmXjG98bE4NHg2o1NSyIIa1yXqWDSDVvwhUnPAt2gMWpOGxnty576cXBCZwI7OlUpd0HlEtkE0gczq2P-pFKLOfjnSVy7TNQocKSIU5m_x4aqytYzvAV7OWBcSrQB_WOWBMh7-bbMEq5ycWk8uJpfmTFCc4pyCu9o83oGvOKBOspyFFGuphgqu229GlZTrC9UpqLMMUsOFiBK3yHLBvFUAH5ANhdlaMGvaaW_TnrAT6Q==',
      adm_level_list: '0',
      city_list: '1',
      county_list: '',
      start_time: dayjs().add(-1, 'h').format('YYYY-MM-DD HH:00:00'),
      end_time: dayjs().format('YYYY-MM-DD HH:00:00'),
      type: 'hour',
      pollutant_list: '134004',
      order: 'ASC'
    }
    if (props.id == 3) {
      json.adm_level_list = '2'
    }
    if (props.id == 4) {
      json.adm_level_list = '3'
      json.station_type_equipment = '小型站'
    }
    axios({
      method: 'get',
      baseURL: 'https://api-station-std-api-v2.airqualitychina.cn',
      url: '/std/region_station_data',
      params: json
    })
      .then(({ data }) => {
        if (!Array.isArray(data.result)) {
          if (props.visible) {
            message.info('接口无数据')
          }
          return
        }
        setList(data.result)
      })
      .catch((err) => {
        if (props.visible) {
          message.error('接口错误')
        }
      })
  }
  return (
    <Layer.VectorLayer
      visible={props.visible}
      source={props.source}
      style={props.style}
      name={props.layerId}
      zIndex={props.zIndex || 2}
    />
  )
}
